<template>
  <div class="profile-page">
    <div class="profile-container">
      <!-- 用户信息卡片 -->
      <n-card class="user-info-card" :bordered="false">
        <div class="user-header">
          <UserAvatar
            :user="userStore.userInfo"
            :size="80"
            show-status
            show-level
            clickable
            @click="showAvatarUpload = true"
          />
          <div class="user-details">
            <h2 class="username">{{ userStore.nickname }}</h2>
            <p class="user-id">ID: {{ userStore.userId }}</p>
          </div>
          <div class="user-actions">
            <n-button
              type="primary"
              @click="router.push('/user/center?tab=settings')"
            >
              编辑资料
            </n-button>
          </div>
        </div>
      </n-card>



      <!-- 快捷操作 -->
      <n-card title="快捷操作" :bordered="false" class="actions-card">
        <div class="action-grid">
          <div class="action-item" @click="router.push('/user/center?tab=favorites')">
            <n-icon :size="24" color="#f56565">
              <HeartOutline />
            </n-icon>
            <span>我的收藏</span>
          </div>
          <div class="action-item" @click="router.push('/user/center?tab=settings')">
            <n-icon :size="24" color="#4299e1">
              <SettingsOutline />
            </n-icon>
            <span>账户设置</span>
          </div>
        </div>
      </n-card>

      <!-- 最近收藏 -->
      <n-card title="最近收藏" :bordered="false" class="favorites-card">
        <div v-if="favoritesLoading" class="loading-container">
          <n-spin size="small" />
        </div>
        <div v-else-if="recentFavorites.length > 0" class="favorites-list">
          <div
            v-for="item in recentFavorites"
            :key="item.id"
            class="favorite-item"
            @click="handleFavoriteClick(item)"
          >
            <div class="favorite-info">
              <span class="favorite-name">{{ item.object?.object_name || '未知物品' }}</span>
              <span class="favorite-time">{{ formatTime(item.create_time) }}</span>
            </div>
          </div>
        </div>
        <n-empty v-else description="暂无收藏" size="small" />
        
        <template #action>
          <n-button text type="primary" @click="router.push('/user/center?tab=favorites')">
            查看全部
          </n-button>
        </template>
      </n-card>
    </div>


  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { getFavorites } from '@/api/account'
import { formatTimestamp } from '@/utils/auth'
import UserAvatar from '@/components/user/UserAvatar.vue'
import type { FavoriteItem } from '@/types/user'
import {
  HeartOutline,
  SettingsOutline
} from '@vicons/ionicons5'

const router = useRouter()
const userStore = useUserStore()

// 状态
const favoritesLoading = ref(false)
const showAvatarUpload = ref(false)

// 数据
const recentFavorites = ref<FavoriteItem[]>([])
const userInfo = ref(userStore.userInfo)

// 格式化时间
const formatTime = (timeStr: string | number): string => {
  if (typeof timeStr === 'string') {
    try {
      const date = new Date(timeStr)
      return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    } catch {
      return timeStr
    }
  }
  return formatTimestamp(timeStr)
}

// 获取最近收藏
const fetchRecentFavorites = async () => {
  try {
    favoritesLoading.value = true
    const response = await getFavorites({ limit: 5 })
    if (response.code === 1) {
      recentFavorites.value = response.data.list
    }
  } catch (error) {
    console.error('获取收藏列表失败:', error)
  } finally {
    favoritesLoading.value = false
  }
}

// 处理收藏项点击
const handleFavoriteClick = (item: FavoriteItem) => {
  // 根据收藏类型跳转到对应页面
  if (item.object_type === 'item') {
    router.push(`/items/${item.object_id}`)
  }
}

// 组件挂载
onMounted(() => {
  fetchRecentFavorites()
})
</script>

<style scoped>
.profile-page {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.profile-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* 用户信息卡片 */
.user-info-card {
  grid-column: 1 / -1;
}

.user-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.user-details {
  flex: 1;
}

.username {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.user-id {
  margin: 0 0 16px 0;
  color: var(--n-text-color-2);
}



/* 快捷操作 */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--n-hover-color);
}

.action-item:hover {
  background: var(--n-pressed-color);
  transform: translateY(-2px);
}

.action-item span {
  font-size: 14px;
  font-weight: 500;
}

/* 收藏列表 */
.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.favorite-item {
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.favorite-item:hover {
  background: var(--n-hover-color);
}

.favorite-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.favorite-name {
  font-weight: 500;
}

.favorite-time {
  font-size: 12px;
  color: var(--n-text-color-2);
}

.loading-container {
  display: flex;
  justify-content: center;
  padding: 40px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .user-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .user-actions {
    width: 100%;
  }

  .action-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .action-item {
    padding: 16px;
  }
}
</style>
